<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo"></Header>
      <Main :deleteOneTodo="deleteOneTodo" :updataOneChecked="updataOneChecked" :todoList="todoList"></Main>
      <Footer :deleteAllDone="deleteAllDone" :updateAllChecked="updateAllChecked" :todoList="todoList"></Footer>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'App'
})
</script>
<script lang="ts" setup>
import Header from "@/components/Header/index.vue"
import Footer from "@/components/Footer/index.vue"
import Main from "@/components/Main/index.vue"
import { ref, watch } from "vue"
export interface TodoData {
  id: number,
  content: string,
  isDone: boolean
}
const todoList = ref<TodoData[]>(JSON.parse(localStorage.getItem("todo_key") as string) || [
  { id: 1, content: "今天", isDone: false },
  { id: 2, content: "是", isDone: true },
  { id: 3, content: "周五", isDone: true },
])

// 添加一个 todo 
const addTodo = (todo: TodoData) => {
  todoList.value.unshift(todo)
}

// 修改 单个 todo 状态
const updataOneChecked = (index: number) => {
  todoList.value[index].isDone = !todoList.value[index].isDone
}

// 修改 全选 与 全不选
const updateAllChecked = (val: boolean) => {
  todoList.value.forEach(item => item.isDone = val)
}
// 删除 单个 todo 
const deleteOneTodo = (index: number) => {
  todoList.value.splice(index, 1)
}

// 清除 已完成
const deleteAllDone = () => {
  todoList.value = todoList.value.filter(item => !item.isDone)
}

// 监视数组变化，持久化存储
watch(todoList, (newVal, oldVal) => {
  localStorage.setItem("todo_key", JSON.stringify(newVal))
}, { deep: true })
</script>

<style lang="less" scoped>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>